<div class="clr-row">
  <div class="clr-col-12">
    <p class="p7 prompt">
      访问内置应用有两种方式:<br><br>
      &nbsp;&nbsp;1.本地hosts文件：复制域名解析规则<button class="btn btn-sm btn-link" (click)="this.openHost = true;">(点此获取)</button>
      到你电脑的hosts文件中 hosts文件地址-> Windows：'C:\Windows\System32\drivers\etc\hosts' Mac：'/etc/hosts'<br><br>
      &nbsp;&nbsp;2.F5：在'服务暴露'页面填写相关信息（需要有F5设备）
    </p>
  </div>
  <div class="clr-col-12 clr-col-sm-4" *ngFor="let app of apps">
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">{{app.name}}</h4>
        <div style="float: left;margin-right: 20px">
          <img [src]=" 'assets/images/'+app.logo" height="48px" width="48px">
        </div>
        <div style="min-height: 64px; text-align:left; padding-top: 10px">
          {{app.describe}}
        </div>
        <p class="card-text">
        </p>
      </div>
      <div class="card-footer">
        <a target="_blank" [href]="getAppUrl(app)" class="card-link">
          <button class="btn btn-link" [disabled]="currentCluster.status !== 'RUNNING'">转到</button>
        </a>
      </div>
    </div>
  </div>
</div>
<clr-modal [(clrModalOpen)]="openHost" clrModalSize="l">
  <h3 class="modal-title">域名解析规则
    <button class="btn btn-icon btn-link" (click)="copy(hosts.innerText)">
      <clr-icon shape="copy"></clr-icon>
      复制
    </button>
  </h3>
  <div class="modal-body" #hosts>
    <span>
      {{workerIp}} grafana.apps.{{currentCluster.name}}.{{currentCluster.cluster_doamin_suffix}} <br>
      {{workerIp}} prometheus.apps.{{currentCluster.name}}.{{currentCluster.cluster_doamin_suffix}} <br>
      {{workerIp}} registry-ui.apps.{{currentCluster.name}}.{{currentCluster.cluster_doamin_suffix}} <br>
      {{workerIp}} dashboard.apps.{{currentCluster.name}}.{{currentCluster.cluster_doamin_suffix}} <br>
      {{workerIp}} traefik.apps.{{currentCluster.name}}.{{currentCluster.cluster_doamin_suffix}} <br>
      {{workerIp}} scope.weave.apps.{{currentCluster.name}}.{{currentCluster.cluster_doamin_suffix}} <br>
      {{workerIp}} kubeapps-plus.apps.{{currentCluster.name}}.{{currentCluster.cluster_doamin_suffix}} <br>
    </span>
    <span *ngIf="currentCluster && currentCluster.persistent_storage!=undefined && currentCluster.persistent_storage === 'rook-ceph'">
      {{workerIp}} ceph.apps.{{currentCluster.name}}.{{currentCluster.cluster_doamin_suffix}} <br>
    </span>
    <app-modal-alert #alertModal></app-modal-alert>
  </div>
</clr-modal>
